<!doctype html>
<html lang="zh">
<head>
    <title>ByUsi-JYp - 简单云服务</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    
    <!-- 引入阿里云CDN的Bootstrap和jQuery -->
    <link href="https://cdifit.cn/cdn/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdifit.cn/cdn/bootstrap/js/bootstrap.bundle.min.js"></script>

    <style>
        body {
            font-family: 'Segoe UI', sans-serif;
            background-color: #f4f7f6;
            color: #333;
            text-align: center;
            padding: 5%;
        }
        .container {
            max-width: 100%;
            margin: 0 auto;
            padding: 1rem;
        }
        .form-container {
            background-color: white;
            padding: 2rem;
            border-radius: 10px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
            margin: 1rem auto;
            max-width: 600px;
        }
        .btn-primary {
            width: 100%;
            background-color: #007BFF;
            border: none;
            margin-top: 1rem;
            padding: 0.75rem;
        }
        .btn-primary:hover {
            background-color: #0056b3;
        }
        .file-list {
            margin-top: 2rem;
            text-align: left;
        }
        .file-list ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }
        .file-list li {
            background-color: #fff;
            margin: 0.5rem 0;
            padding: 1rem;
            border-radius: 8px;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
            word-wrap: break-word;
        }
        .file-list li a {
            text-decoration: none;
            color: #007BFF;
            font-weight: bold;
            word-break: break-all;
        }
        h1, h2 {
            word-wrap: break-word;
        }
    </style>

    <script>
        // 上传文件功能
        function uploadFile() {
            var fileInput = document.getElementById('fileInput');
            var uploadStatus = document.getElementById('uploadStatus');
            var formData = new FormData();
            formData.append('file', fileInput.files[0]);

            var xhr = new XMLHttpRequest();
            xhr.open('POST', '/upload', true);

            xhr.onloadstart = function() { uploadStatus.textContent = '正在上传...'; };
            xhr.onload = function () {
                uploadStatus.textContent = '';
                if (xhr.status === 200) {
                    var response = JSON.parse(xhr.responseText);
                    if (response.status === 'success') {
                        var fileList = document.getElementById('fileList');
                        var newFile = '<li><a href="/view/' + response.filename + '">在线预览文件 - ' + response.filename + '</a></li>';
                        fileList.innerHTML += newFile;
                    } else { alert('上传失败，请重试'); }
                }
            };
            xhr.send(formData);
        }

        // 文件搜索功能
        function searchFiles() {
            var searchInput = document.getElementById('searchInput').value.toLowerCase();
            var fileItems = document.querySelectorAll('.file-list li');
            fileItems.forEach(function (item) {
                var fileName = item.textContent.toLowerCase();
                if (fileName.includes(searchInput)) {
                    item.style.display = '';  // 显示匹配的文件
                } else {
                    item.style.display = 'none';  // 隐藏不匹配的文件
                }
            });
        }
    </script>
</head>
<body>
    <div class="container">
        <h1 class="my-4">ByUsi-JYp2.7 - 简单云服务</h1>

        <div class="form-container">
            <form onsubmit="event.preventDefault(); uploadFile();">
                <input type="file" id="fileInput" class="form-control" required><br>
                <input type="submit" class="btn btn-primary" value="上传文件">
            </form>
        </div>

        <div id="uploadStatus" class="mt-3"></div>

        <!-- 文件搜索输入框 -->
        <div class="form-container">
            <h2>搜索</h2>
            <input type="text" id="searchInput" class="form-control" placeholder="搜索文件" onkeyup="searchFiles()">
        </div>

        <div class="file-list mt-4">
            <h2>已上传文件</h2>
            <ul id="fileList">
                {% for file in files %}
                    <li><a href="/view/id/{{file.id}}">在线预览文件 - {{ file.filename }}</a></li>
                {% endfor %}
            </ul>
        </div>
    </div>

    <!-- 以下内容可以注释，但不能删除 -->
    <div class="file-list mt-4">
        <ul>
            <li>
                <a>&copy; ByUsi</a>
            </li>
            <li>
                <a>&copy; ByUsi-JYp</a>
            </li>
        </ul>
    </div>
    <!-- 以上内容可以注释，但不能删除 -->
</body>
</html>
